<template>
	<!-- 未绑定用户的工位 -->
	<vue3-seamless-scroll class="v-s-s" :list="list" :step="0.4" :hover="true">
           <el-tag v-for="item in list" :key="item" effect="dark" size="small" round style="margin-left:13px;margin-bottom:10px;">
               {{ item }}
             </el-tag>
	<!-- 	<el-row :gutter="1" class="v-s-s_item " align="middle">
		
			
			<el-col v-for="item in list" :xs="24" :sm="8" :md="8" :lg="8" :xl="8" class="mb75">
				
				<el-icon :size="20" color="#EFFF0FFF">
					<Star/>
				</el-icon>
				<el-text class="mx-1" type="primary" style="font-size:15px;" size="small" tag="b">{{item}}</el-text>
			</el-col>
		</el-row> -->
	</vue3-seamless-scroll>
</template>

<script>
	import {
		ref,
		reactive,
		toRefs,
		onMounted
	} from 'vue'
	import {useRouter} from 'vue-router';
	import {
		Vue3SeamlessScroll
	} from 'vue3-seamless-scroll'
	import {
		http
	} from '@/api/http'
	import {
		httpErrorHandle
	} from '@/utils'
	import {
		ContentTypeEnum,
		RequestHttpEnum,
		ModuleTypeEnum
	} from '@/enums/httpEnum'
	export default {
		components: {
			Vue3SeamlessScroll,
		},
		setup() {
			const state = reactive({
				list: [],
			});
			let router = useRouter();
			const init = (data) => {
				let url=`${ModuleTypeEnum.PROJECT}/unBindUserStations`;
				http(RequestHttpEnum.GET)(url, data)
					.then(res => {
						state.list = res.data;
					});
			}
			onMounted(() => {
				init()
				
			})
			
			setInterval(() => {
				init();
			}, 30000);


			return {
				...toRefs(state),
			};
		},
		methods: {
			showColor() {
					return "#EFFF0FFF";
			},
			showIconShine(status) {
				if (status == null || status == undefined)
					return null;
				if (status == "无订单生产" || status == "未生产" || status == "不在线")
					return 'icon-shine';

				return null;
			}
		}
	};
</script>

<style scoped>
/* 	@import url('../../../public/css/iconfont.css');
	@import url('../../../public/css/iconshine.css'); */

	.v-s-s {
		/* height: 200px; */
		margin: 20px auto;
		overflow: hidden;
		/* font-size: 13px; */

		.v-s-s_item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 50px 0;
		}
	}
	
	.el-badge {
	    --el-badge-bg-color: var(--el-color-danger);
	    --el-badge-radius: 20px;
	    --el-badge-font-size: 22px;
	    --el-badge-padding: 6px;
	    --el-badge-size: 28px;
	    position: relative;
	    vertical-align: middle;
	    display: inline-block;
	    width: -webkit-fit-content;
	    width: -moz-fit-content;
	    width: fit-content
	}
</style>